<template>
  <div>
    <van-search
      v-model="value"
      placeholder="请输入小区或者地址"
      show-action
      background="transparent"
    >
      <template #label>
        <router-link to="/area"
          ><span style="color: #000">{{ city.label }}</span
          ><van-icon name="arrow-down"
        /></router-link>
      </template>
      <template #action
        ><van-icon
          name="location"
          size="20px"
          color="#fff"
          @click="$router.push('/map')"
      /></template>
    </van-search>
    <van-dropdown-menu>
      <van-dropdown-item title="区域">
        <van-picker :columns="columns">
          <template #columns-bottom>
            <van-row>
              <van-col span="8"
                ><van-button type="default" style="width: 100%"
                  >取消</van-button
                ></van-col
              >
              <van-col span="16"
                ><van-button type="primary" style="width: 100%"
                  >确认</van-button
                ></van-col
              >
            </van-row>
          </template>
        </van-picker>
      </van-dropdown-item>
      <van-dropdown-item title="方式">
        <van-picker :columns="columns1">
          <template #columns-bottom>
            <van-row>
              <van-col span="8"
                ><van-button type="default" style="width: 100%"
                  >取消</van-button
                ></van-col
              >
              <van-col span="16"
                ><van-button type="primary" style="width: 100%"
                  >确认</van-button
                ></van-col
              >
            </van-row>
          </template>
        </van-picker>
      </van-dropdown-item>
      <van-dropdown-item title="租金">
        <van-picker :columns="columns2">
          <template #columns-bottom>
            <van-row>
              <van-col span="8"
                ><van-button type="default" style="width: 100%"
                  >取消</van-button
                ></van-col
              >
              <van-col span="16"
                ><van-button type="primary" style="width: 100%"
                  >确认</van-button
                ></van-col
              >
            </van-row>
          </template>
        </van-picker>
      </van-dropdown-item>
      <van-dropdown-item title="筛选" @open="show = true"> </van-dropdown-item>
    </van-dropdown-menu>
    <van-popup
      v-model="show"
      position="right"
      :style="{ height: '100%', width: '70%' }"
    >
      <div class="condition">
        <div class="housetype">
          <div class="title">
            <h5>户型</h5>
          </div>
          <div class="body">
            <span>一室</span>
            <span>二室</span>
            <span>三室</span>
            <span>四室</span>
            <span>四室+</span>
          </div>
        </div>
        <div class="housetype">
          <div class="title">
            <h5>朝向</h5>
          </div>
          <div class="body">
            <span>东</span>
            <span>西</span>
            <span>南</span>
            <span>北</span>
            <span>东南</span>
            <span>东北</span>
            <span>西南</span>
            <span>西北</span>
          </div>
        </div>
        <div class="housetype">
          <div class="title">
            <h5>楼层</h5>
          </div>
          <div class="body">
            <span>高楼层</span>
            <span>中楼层</span>
            <span>低楼层</span>
          </div>
        </div>
        <div class="housetype">
          <div class="title">
            <h5>房屋亮点</h5>
          </div>
          <div class="body">
            <span>集中供暖</span>
            <span>双卫生间</span>
            <span>近地铁</span>
            <span>随时看房</span>
            <span>精装</span>
            <span>公寓</span>
            <span>独立卫生间</span>
            <span>押一付一</span>
            <span>独立阳台</span>
            <span>月租</span>
            <span>限女生</span>
            <span>限男生</span>
            <span>新上</span>
          </div>
        </div>
      </div>

      <div class="footer">
        <!-- <div class="left">清除</div>
        <div class="right">确定</div> -->
        <van-row>
          <van-col span="10"
            ><van-button type="default">默认按钮</van-button></van-col
          >
          <van-col span="14"
            ><van-button type="primary">主要按钮</van-button></van-col
          >
        </van-row>
      </div>
    </van-popup>
    <div class="box">
      <div
        class="house"
        v-for="(item, index) in cityhouse"
        :key="index"
        @click="$router.push(`HousingDetails/${item.houseCode}`)"
      >
        <div class="pic">
          <van-image
            width="100%"
            height="100%"
            :src="'http://liufusong.top:8080' + item.houseImg"
          />
        </div>
        <div class="text">
          <h4 class="sin-line">{{ item.title }}</h4>
          <p>{{ item.desc }}</p>
          <span v-for="(item1, index) in item.tags" :key="index">{{
            item1
          }}</span>
          <br />
          <b>{{ item.price }}元/月</b>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getcityhouse, getcityarea } from '@/api/look'
export default {
  name: 'look-page',
  components: {},
  props: {},
  data() {
    return {
      value: '',
      city: JSON.parse(localStorage.getItem('city')) || {
        label: '北京',
        value: 'AREA|88cff55c-aaa4-e2e0',
        pinyin: 'beijing',
        short: 'bj'
      },
      show: false,
      cityhouse: [],
      columns: [
        {
          text: '区域',
          children: [
            {
              text: '杭州',
              children: [{ text: '西湖区' }, { text: '余杭区' }]
            },
            {
              text: '温州',
              children: [{ text: '鹿城区' }, { text: '瓯海区' }]
            }
          ]
        },
        {
          text: '地铁',
          children: [
            {
              text: '福州',
              children: [{ text: '鼓楼区' }, { text: '台江区' }]
            },
            {
              text: '厦门',
              children: [{ text: '思明区' }, { text: '海沧区' }]
            }
          ]
        }
      ],

      columns1: ['不限', '整租', '合租'],
      columns2: [
        '1000一下',
        '1000-2000',
        '2000-3000',
        '3000-4000',
        '4000-5000',
        '5000-6000',
        '7000以上'
      ]
    }
  },
  computed: {},
  watch: {},
  async created() {
    const res = await getcityhouse({ cityId: this.city.value })
    // console.log(res)
    this.cityhouse = res.body.list
    console.log(res.body.list)
    const res1 = await getcityarea({ id: this.city.value })
    console.log(res1)
  },
  methods: {
    // showPopup() {
    //   this.show = !this.show
    // }
    // house(code) {
    //   this.$router.push('/housingdetails')
    //   localStorage.setItem('houseCode', code)
    // }
    // fn(houseCode) {
    //   this.$router.push({
    //     path: '/housingdetails/:id',
    //     name: 'HousingDetails',
    //     params: { id: houseCode }
    //   })
    // }
  }
}
</script>

<style scoped lang="less">
::v-deep .van-search {
  background-color: #41c38d !important;
}
::v-deep .van-popup {
  z-index: 9999;
}
.box {
  width: 100%;
  padding: 10px;
  .house {
    height: 120px;
    width: 100%;
    // background-color: red;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .pic {
      width: 106px;
      height: 80px;
      // background-color: red;
    }
    .text {
      // background-color: blue;
      width: 227px;
      height: 89px;
      color: #000;
      padding: 5px 0 0 10px;

      p {
        color: #ccc;
        font-size: 12px;
      }
      span {
        display: inline-block;
        padding: 2px 4px;
        background-color: #41c38d;
        color: #9fdfe7;
        font-size: 12px;
        border-radius: 4px;
        margin-right: 2px;
      }
      b {
        color: red;
      }
    }
  }
}
.van-popup {
  .condition {
    padding: 10px;

    .housetype {
      margin-bottom: 10px;
      .title {
        margin-bottom: 10px;
        h5 {
          font-size: 17px;
        }
      }
      .body {
        margin-left: 40px;
        width: 200px;
        // height: 156px;
        border-bottom: 1px solid #ccc;
        // background-color: red;
        padding-bottom: 10px;
        span {
          display: inline-block;
          width: 70px;
          height: 32px;
          border-radius: 5px;
          border: 1px solid #ccc;
          margin: 0 18px 15px 0;
          text-align: center;
          line-height: 32px;
          font-size: 12px;
          color: #ccc;
        }
      }
    }
  }

  .footer {
    .van-button {
      width: 100%;
    }
  }
}
</style>
